<style lang="scss" scoped>

.banner {
    overflow: hidden;
    margin: 0 auto;
    .carousel {
        width: 100%;
        height: 100%;
        img {
            width: 100%;
            display: block;
        }
    }
}

    /*精准医学*/

    .medicine {
        height: 360px;
        background: rgba(242, 242, 242, 1);
        .medicine-inner {
            padding: 60px;
            .medicine-pic {
                width: 150px;
                margin: auto;
                .medicine-icon {
                    cursor: pointer;
                    width: 100px;
                    height: 100px;
                    margin: 0 25px;
                    border-radius: 50%;
                    transition: transform 0.5s;
                    &:hover {
                        transform: scale(1.2);
                        transition: transform 0.5s;
                    }
                    img {
                        width: 60px;
                        height: 60px;
                        display: inline-block;
                        margin-top: 20px;
                    }
                }
                p {
                    margin-top: 20px;
                    cursor: pointer;
                    width: 150px;
                    font-size: 16px;
                    text-align: center;
                    &:hover {
                        color: #ff6600;
                    }
                }
            }
        }
    }
    /*组学云平台*/

    .cloud {
        height: 650px;
        background: rgba(255, 255, 255, 1);
        .cloud-inner {
            height: 488px;
            padding: 40px 50px 0;
            .cloud-pic-fs {
                height: 488px;
                background: url('/static/images/home/u8.jpg') no-repeat;
            }
            .cloud-pic-sc {
                height: 244px;
                background: url('/static/images/home/u6.jpg') no-repeat;
            }
            .cloud-pic-th {
                height: 244px;
                background: url('/static/images/home/u218.jpg') no-repeat;
            }
            .cloud-pic-fr {
                height: 244px;
                background: url('/static/images/home/u94.jpg') no-repeat;
                background-size: 100% 100%;
            }
            .cloud-pic {
                position: relative;
                .cloud-bg {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 333;
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 244px;
                    text-align: center;
                    color: #fff;
                }
                .cloud-bg.cloud-bg-fs {
                    background: rgba(25, 158, 216, .7);
                    line-height: 488px;
                    &:hover {
                        background: rgba(25, 158, 216, .5);
                    }
                }
                .cloud-bg.cloud-bg-sc {
                    background: rgba(0, 181, 0, .7);
                    &:hover {
                        background: rgba(0, 181, 0, .5);
                    }
                }
                .cloud-bg.cloud-bg-th {
                    background: rgba(255, 102, 0, .7);
                    &:hover {
                        background: rgba(255, 102, 0, .5);
                    }
                }
                .cloud-bg.cloud-bg-fr {
                    background: rgba(0, 0, 0, .7);
                    &:hover {
                        background: rgba(0, 0, 0, .5);
                    }
                }
            }
        }
    }
    /*关于我们 */

    .about {
        height: 420px;
        background-image: url('/static/images/home/about.jpg');
        background-size: 100% 100%;
        width: 100%;
        position: relative;
        .about-bg {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            position: absolute;
            top: 0;
            left: 0;
        }
        .inner {
            color: #fff;
        }
        .about-txt {
            color: #fff;
            text-indent: 2em;
            padding: 60px 0 0;
            margin: auto;
            line-height: 28px;
        }
    }

.inner {
    padding-top: 30px;
    text-align: center;
    color: #333;
    .inner-title {
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 0.5rem;
        span {
            font-size: 14px;
            color: #ff6600;
            letter-spacing: 0;
            font-weight: normal;
        }
    }
}


</style>
<template>
    <div id="main">
        
    <div class="banner">
        <el-carousel :interval="5000" arrow="never" :height="height">
            <el-carousel-item v-for="(item,index) in banners" :key="index">
                <div class="carousel">
                    <img :src="item.img" alt="" :height="height">
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
    <!--精准医学-->
    <div class="medicine" v-if='medicineshow'>
        <div class="inner container">
            <div class="inner-title">精准医学</div>
            <div class="medicine-inner">
                <Row type="flex" justify="space-between">
                    <Col :lg="{span:6}">
                    <div class="medicine-pic">
                        <div class="medicine-icon" style="background:#1ea8e3;">
                            <img src="/static/images/home/tu2.png" />
                        </div>
                        <p>罕见病精准医学</p>
                    </div>
                    </Col>
                    <Col :lg="{span:6}">
                    <div class="medicine-pic">
                        <div class="medicine-icon" style="background:#00c800;">
                            <img src="/static/images/home/tu3.png" />
                        </div>
                        <p>肿瘤精准医学</p>
                    </div>
                    </Col>
                    <Col :lg="{span:6}">
                    <div class="medicine-pic">
                        <div class="medicine-icon" style="background:#00c8c8;">
                            <img src="/static/images/home/tu1.png" />
                        </div>
                        <p>药物基因组精准分析</p>
                    </div>
                    </Col>
                </Row>
            </div>
        </div>
    </div>

    <!--组学云平台-->
    <div class="cloud" v-if='cloudshow'>
        <div class="inner container">
            <div class="inner-title">组学云平台</div>
            <div class="cloud-inner">
                <Row>
                    <Col span="6">
                    <div class="cloud-pic cloud-pic-fs">
                        <div class="cloud-bg cloud-bg-fs">基因组学研究</div>
                    </div>
                    </Col>
                    <Col span="18">
                    <div class="cloud-pic cloud-pic-sc">
                        <div class="cloud-bg cloud-bg-sc">蛋白质组研究</div>
                    </div>
                    <Row>
                        <Col span="12">
                        <div class="cloud-pic cloud-pic-th">
                            <div class="cloud-bg cloud-bg-th">代谢组</div>
                        </div>
                        </Col>
                        <Col span="12">
                        <div class="cloud-pic cloud-pic-fr">
                            <div class="cloud-bg cloud-bg-fr">更多</div>
                        </div>
                        </Col>
                    </Row>
                    </Col>
                </Row>
            </div>
        </div>
    </div>
    <!--关于我们-->
    <div class="about" id="#about" v-if="aboutshow">
        <div class="about-bg">
            <div class="inner container">
                <div class="inner-title">关于我们</div>
                <div class="about-txt">
                    <Row>
                        <Col span="24">
                        <p style="text-align:left;">
                            <span style="color:#C10028;font-weight:700;font-size:20px;">神</span>州医疗目前是国内最早、 最权威的能够承担国家级健康医疗大数据建设和运营的企业。拥有健康医疗领域多项自主知识产权及软件著作权，拥有医疗信息化、医疗大数据分析、基因、医疗影像、生物信息、临床医学、病理、放疗等方面的专业技术、业务专家、医生及博士团队。神州医疗专注于健康医疗大数据、医疗云服务、 医疗卫生信息化等领域，向客户提供医疗信息化及健康医疗大数据服务， 帮助客户提高健康医疗服务水平，努力成为中国健康医疗大数据品牌领导者。神州医疗承担过国家“十二五”计划—人口宏观管理与决策信息系统（PADIS系统)，国家肿瘤大数据平台（863课题）， 国家罕见病临床队列登记注册网络平台、 国家卫生计生委建设装备审批监管系统工程软件开发等国家级项目建设， 同时在北京、 天津、 江苏、 湖南、 湖北、黑龙江等多地承担着区域卫生信息平台、医院信息集成平台等省市级项目建设。神州医疗依托目前主流的云计算、大数据、物联网、 人工智能、机器学习、可穿戴设备等新技术，不断驱动我国健康医疗大数据发展的变革与创新，向客户提供健康医疗大数据解决方案、医疗信息化建设咨询、健康医疗软件产品开发、 医疗卫生大数据中心建设及安全体系建设等全面医疗服务解决方案，具有区域人口健康信息平台、医院随访、远程医疗、医疗影像等几大产品线。
                        </p>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>

    </div>

    </div>
</template>

<script>
export default {
    name:"main",
    data() {
        return {
            height: "408px",
            medicineshow:false,
            cloudshow:false,
            banners: [{ img: require('static/images/home/bn1.jpg') }, { img: require('static/images/home/bn2.jpg') }, { img: require('static/images/home/bn3.jpg') }, { img: require('static/images/home/bn4.jpg') }]
        }
    },
    methods: {
        resize: function() {//动态改变banner图的高度
            const that = this;
            window.screenWidth = document.body.clientWidth;
            that.screenWidth = window.screenWidth;
            that.height = that.screenWidth * 0.2125 + "px";
        }
    },
    created(){
        setTimeout(()=>{
            this.medicineshow=true;
        },0)
        setTimeout(()=>{
            this.cloudshow=true;
        },0)
        setTimeout(()=>{
            this.aboutshow=true;
        },0)
    },
    mounted(){
        this.resize();
        const that = this;
        window.onresize = function() {
            return that.resize();
        } 
    }
}
</script>


